<template>
    <div class="classban">
        <div class="top clearfix">
            <span class="fl">课程</span>
            <span class="fl active">班级</span>
            <span class="fr"><img src="../assets/seach.png" alt=""></span>
        </div>
        <div class="nav_bar">
            <div class="one active1" :class="{active1:isActive1=='tui'}">
                <span>推荐</span>
                <span v-if="isActive1=='tui'"><img src="../assets/sanjiao1_03.png" alt=""></span>
                 <span v-else><img src="../assets/sanjiao_03.png" alt=""></span>
            </div>
            <div class="one">
                <span>即将开班</span>
                 <span v-if="false"><img src="../assets/sanjiao1_03.png" alt=""></span>
                 <span v-else><img src="../assets/sanjiao_03.png" alt=""></span>
            </div>
            <div class="one">
                <span>优秀班级</span>
                 <span v-if="false"><img src="../assets/sanjiao1_03.png" alt=""></span>
                 <span v-else><img src="../assets/sanjiao_03.png" alt=""></span>
            </div>
            <div class="one">
                <span>班级分类</span>
                 <span v-if="false"><img src="../assets/sanjiao1_03.png" alt=""></span>
                 <span v-else><img src="../assets/sanjiao_03.png" alt=""></span>
            </div>
        </div>
        <div class="list">
            <ul>
                <li class=" clearfix">
                    <div class="left fl">
                        <img src="../assets/9420.png" alt="">
                    </div>
                    <div class="right fl">
                        <h3>2019高三班主任综合提升班</h3>
                        <p>培训地点：马德华</p>
                        <p>培训时间：2019-9-23 12：00</p>
                        <div class="last">
                            报名对象：<span>327</span>/600
                        </div>
                    </div>
                </li>
                <li class=" clearfix">
                    <div class="left fl">
                        <img src="../assets/1308040.png" alt="">
                    </div>
                    <div class="right fl">
                        <h3>2019高三班主任综合提升班</h3>
                        <p>培训地点：马德华</p>
                        <p>培训时间：2019-9-23 12：00</p>
                        <div class="last">
                            报名对象：<span>327</span>/600
                        </div>
                    </div>
                </li>
                <li class=" clearfix">
                    <div class="left fl">
                        <img src="../assets/d91e.png" alt="">
                    </div>
                    <div class="right fl">
                        <h3>2019高三班主任综合提升班</h3>
                        <p>培训地点：马德华</p>
                        <p>培训时间：2019-9-23 12：00</p>
                        <div class="last">
                            报名对象：<span>327</span>/600
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <footbar></footbar>
    </div>
</template>

<script>
import footbar from '../components/footbar'
    export default {
        name:'classban',
        data (){
            return{
                isActive1:'tui'
            }
        },
        components:{
            footbar
        }   
    }
</script>

<style lang="less" scoped>
@family: AlibabaPuHuiTiR;
@family1: AdobeHeitiStd_regular;
.classban{
    width: 100%;
    background-color: #f8f8f8;
    font-size: 0;
    
    .top{
        width: 100%;
        height: 1rem;
        line-height: 1rem;
        background-color: #fff;
        font-family: @family1;
        font-size: 0.24rem;
        padding: 0 0.2rem;
       box-sizing: border-box;
        span{
            display: inline-block;
            &:nth-child(1){
                margin-right:0.4rem;
            }
            &.active{
                font-size: 0.3rem;
                color:rgb(237,26,34);
            }
            &.fr{
                width: 0.28rem;
                height: 0.28rem;
                img{
                    width: 100%;
                }
            }

        }

    }
    .nav_bar{
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-family: @family;
        font-size: 0.24rem;
        color:rgb(49,49,49);
        background-color: #fff;
        margin-top:0.2rem;
        height: 0.5rem;
        line-height: 0.5rem;
          padding: 0 0.2rem;
        box-sizing: border-box;
        background-color: #fff;
        span{
            &:nth-child(2){
                width: 0.15rem;
                height: 0.06rem;
                display: inline-block;
                img{
                    width: 100%;
                   
                }
            }
        }
        .active1{
            color:rgb(232,29,27);
        }
    }
    .list{
        width: 100%;
        margin-top:0.2rem;
        font-size: 0.24rem;
        font-family: @family;
        color:rgb(38,34,34);
        li{
           background-color: #fff;
           margin-bottom: 0.2rem; 
              padding: 0.2rem;
               box-sizing: border-box;
           .left{
               width: 31%;
               border-radius: 0.15rem;
               overflow: hidden;
               margin-right:2%;
               img{
                   width: 100%;
               }

           }
           .right{
               width: 67%;
                h3{
               font-size: 0.26rem;
                font-family: @family;
                color:rgb(38,34,34);
                font-weight: 400;
           }
           p{
               &:nth-child(2){
                   font-size: 0.2rem;
                   color:rgb(170,162,162);
               }
               &:nth-child(3){
                   color:rgb(232,29,27);
               }
           }
            .last{
               margin-top:0.2rem;
               color:rgb(170,162,162);
               span{
                  color:rgb(232,29,27);
               }
           }
           }
           
          
        }
    }
}

</style>